<template>
  <div v-if="filmList!=0">
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      style="height: 100%; width: 100%"
    >
      <van-card
        v-for="(item, index) in list"
        :key="item + index"
        :thumb="item.poster"
        tag="hot"
        @click="pushRouter(item.filmId)"
      >
        <template #title>
          <van-row class="nowPlay-title-name">
            <span>{{ item.name }}</span>
            <van-tag
              size="medium"
              plain
              type="danger"
              class="nowPlay-title-name-van-tag"
              >{{ item.filmType.name }}</van-tag
            >
          </van-row>
        </template>

        <template #desc>
          <van-row class="nowPlay-title-grade">
            <span>观众评分</span>
            <span>{{ item.grade }}</span>
          </van-row>
        </template>

        <template #price-top>
          <van-row class="nowPlay-title-price-top">
            <span span="4">主演:</span>
            <span
              v-for="(items, indexs) in item.actors"
              :key="items.avatarAddress + indexs"
              >{{ items.name }}</span
            >
          </van-row>
          <van-row class="nowPlay-title-nation own-style1">
            <span>{{ item.nation }}</span>
            <span>| {{ item.runtime }}分钟</span>
          </van-row>
        </template>

        <template #footer>
          <van-button size="small" class="nowPlay-title-button"
            >购票</van-button
          >
        </template>
        <!-- 有bug 不能删除template这个num标签 删除就会导致盒子坍塌 -->
        <template #num> </template>
      </van-card>
    </van-list>
  </div>
</template>

<script>
import hotMovie from "../../request-get/hot-movie.js";
export default {
  name:"nowPlaying",
  data() {
    return {
      active: 0,
      // ajax接收的数组
      filmList:[],
      // 接受的数组
      list: [],
      // 判断是否需要加载
      loading: false,
      // 是否完成
      finished: false,
      flag:0,
      setTime:0
    };
  },
  created(){
      this.filmList.splice(0,this.filmList.length)
      let that=this;
      import("../../store/index.js").then((res)=>{
           return     hotMovie(res.default.state.cityId);
      }).then((res1)=>{
            //  console.log(res1,"这是res1");
             this.filmList= JSON.parse(JSON.stringify(res1))  
             this.list.splice(0,this.list.length);
            //  this.$store.commit("setPlayingList",that.list)
             this.$store.commit("setPlayingList",this.filmList)
      })
    
  },
  methods: {
    onLoad() {

      this.setTime=   setTimeout(() => {
               let core=this.list.length;
               for (let i =0; i < 4; i++) {
                if((core+i)>= this.filmList.length ){
                  this.finished = true;
                  break;
                }
                 this.list.push(this.filmList[core+i]);
              }
               this.loading = false;
                // 数据全部加载完成
               if (this.list.length >= this.filmList.length) {
                  this.finished = true;
              }
            }, 200);


         
    },
    // 保留 等下再改
    setfilmId(e) {
 
      this.$store.commit("setfilmId", e);
    },
    pushRouter(e) {
      // 点击取到filmid

      this.setfilmId(e);
      this.$router.push({
        path: "film",
        query:{
          filmId:e,
          showBuy:true
        }
      });
    },
  },
  beforeDestroy(){
    clearTimeout(this.setTime)
  }
};
</script>
<style >
/* 片名 */
div.nowPlay-title-name {
  text-align: left;
  font-size: 16px;
  width: 150px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
div.nowPlay-title-name .nowPlay-title-name-van-tag {
  margin-left: 10px;
  background-color: rgb(210, 214, 220);
  color: white;
  border-radius: 5px;
}
/* 成绩 */
div.nowPlay-title-grade {
  text-align: left;
  font-size: 16px;
}
div.nowPlay-title-grade span:nth-child(1) {
  font-size: 14px;
}
div.nowPlay-title-grade span:nth-child(2) {
  margin-left: 10px;
  color: rgb(255, 196, 97);
}
/* 主演 */
div.nowPlay-title-price-top {
  width: 140px;
  height: 20px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}


/* 来自中国大陆 */
div.nowPlay-title-nation {
  transform: translateX(-7px);
  width: 100px;
}
.own-style1 {
  margin-left: 7px;
}
/* 绝对定位的按钮 */
.nowPlay-title-button {
  position: absolute;
  bottom: 35px;
  right: 10px;
  color: rgb(255, 174, 138);
  border: rgb(255, 174, 138) 1px solid;
}

/* 这个调一下页面的间距 */
div.van-card__bottom {
  margin-bottom: 5px;
}
</style>